<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta character="utf-8"/>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <title>测试页面</title>
    </head>
    <body>
        <h1>测试页面</h1>
        <div th:text="${message}"></div>
        <div>
            <input id="studentId"  minlength="20" placeholder="学生id">
            <button onclick="checkStudent()">查询</button>
            <button onclick="show()">增加</button>
        </div>
        <table border="1">
            <tr>
                <th></th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr th:each="contact:${studentGrades}">
                <td th:text="${contact.student.id}"></td>
                <td th:text="${contact.student.sname}"></td>
                <td th:text="${contact.student.sex}"></td>
                <td th:text="${contact.student.age}"></td>
                <td>
                    <button th:value="${contact.student.id}" onclick="show(value)">编辑</button>
                    <button th:value="${contact.student.id}" onclick="deleteStudent(value)">删除</button>
                </td>
            </tr>
        </table>
    <div>
        <select id="student" name="student">
            <option th:each="contact:${studentGrades}" th:text="${contact.student.sname}"
             th:value="${contact.student.id}"></option>
        </select>
        <select id="course" name="course">
            <option th:each="course:${courseList}" th:text="${course.cname}"
                    th:value="${course.id}"></option>
        </select>
        <input id="gradeId" type="number" minlength="10" oninput="if(value>100||value<0)value=100">
        <button onclick="checkGrade()">查询</button>
        <button onclick="updateGrade()">保存</button>
    </div>
        <div id="model" hidden="hidden" style="border: 1px solid #000000;position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px;background-color: #fff">
            <form id="studentInput">
                <input type="hidden" id="input_id">
                姓名: <input type="text" id="input_name"><br>
                性别: <input type="text" id="input_sex"><br>
                年龄: <input type="text" id="input_age">
            </form>
            <div>
                <button id="model_cancel" onclick="confirm()">确认</button>
                <button id="model_confirm" onclick="hide()">取消</button>
            </div>
        </div>
        <script>
            function inputGrade(grade){
                if(grade>100||grade<0){
                    alter("分数应该在0~100之间")
                }
                console.log(grade)
            }
            function checkGrade(){
                var course=document.getElementById("course").value;
                var student=document.getElementById("student").value;
                axios.get("/test/grade/check?student="+student+"&course="+course,{
                       student: student,
                       course: course
                }).then(res => {
                    console.log(res)
                    document.getElementById("gradeId").value=res.data
                })
            }
            function updateGrade(){
                var course=document.getElementById("course").value;
                var student=document.getElementById("student").value;
                var score=document.getElementById("gradeId").value;
                console.log(student)
                console.log(course)
                console.log(score)
                axios.post("/test/grade/update",{
                       studentId: parseInt(student),
                       courseId: parseInt(course),
                       score: parseInt(score)
                }).then(res => {
                    document.getElementById("model_text").value="修改成功"
                    document.getElementById("model").style.display="block";
                })
            }
            function hideModel(){
                document.getElementById("model").style.display="none";
            }
            function checkStudent(){
                var studentName=document.getElementById("studentId").value
                studentGrades=[]
                window.location.href="/test/student/check?sname="+studentName;
            }
            function deleteStudent(id){
            console.log(id)
                axios.post("/test/student/delete",{
                       studentId: parseInt(id)
                }).then(res => {
                    document.getElementById("model_text").value="删除成功"
                    document.getElementById("model").style.display="block";
                })
            }
            function show(value){

                document.getElementById("model").style.display="block";
                if(value){
                    axios.get("/student/"+parseInt(value),{
                    }).then(res => {
                        console.log(res)
                        document.getElementById("input_name").value=res.data.sname
                        document.getElementById("input_age").value=res.data.age
                        document.getElementById("input_sex").value=res.data.sex
                        document.getElementById("input_id").value=res.data.id
                    })
                }
            }
            function confirm(){
                document.getElementById("model").style.display="none";
                if(document.getElementById("input_id").value=res.data.id){
                    axios.post("/test/student/update",{
                       id: parseInt(document.getElementById("input_id").value),
                       sname: document.getElementById("input_age").value,
                       sex: document.getElementById("input_sex").value,
                       age: parseInt(document.getElementById("input_age").value)
                    })
                }else{
                    axios.post("/test/student/insert",{
                       sname: document.getElementById("input_age").value,
                       sex: document.getElementById("input_sex").value,
                       age: parseInt(document.getElementById("input_age").value)
                    })
                }
            }
            function hide(){
                document.getElementById("model").style.display="none";
            }
        </script>
    </body>

</html>